<template>
	<view>
		<view class="commentlist" v-for="(item,index) in list" :key="index" v-if="kong==true">
			<view class="commentinfo">
				<view class="personbox">
					<!-- anonymity1不匿名 2匿名 -->
					<view class="logobox">
						<image :src="item.anonymity==1?item.wxPhotoURL:'../../static/default-avatar.png'"></image>
					</view>
					<view class="infobox">
						<view class="namebox">{{item.anonymity==1?item.wxName:'微信用户'}}</view>
						<view class="starbox">
							<uni-rate :value="item.stars" :size="16" max="5" :readonly="true"/>
						</view>
					</view>
				</view>
				<view class="timebox">{{getTime(item.create_time)}}</view>
			</view>
			<view class="wordbox">
				{{item.content}}
			</view>
			<view class="commentimg">
				<view class="imgbox" v-for="(imgitem,imgindex) in item.picarr.split(',')" :key="imgindex">
					<image :src="imgitem"></image>
				</view>
			</view>
		</view>
		<kong v-if="kong==false"></kong>
	</view>
</template>

<script>
	import kong from '../../components/kong.vue'
	export default {
		components:{
			kong
		},
		data() {
			return {
				list:[],
				kong:null,
			}
		},
		onLoad(option) {
			console.log(JSON.parse(option.list),'list')
			this.list = JSON.parse(option.list)
			this.getlist()
		},
		methods: {
			getTime: function(value) {           
			                var date = new Date(value*1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			                var year = date.getFullYear();
			                var month = ("0" + (date.getMonth() + 1)).slice(-2);
			                var sdate = ("0" + date.getDate()).slice(-2);
			                var hour = ("0" + date.getHours()).slice(-2);
			                var minute = ("0" + date.getMinutes()).slice(-2);
			                var second = ("0" + date.getSeconds()).slice(-2);
			                // 拼接
			                var result = year + "年" + month + "月" + sdate + "日 " + hour + ":" + minute //+ ":" + second;
			                // 返回
			                return result;
			            },
			getlist(){
				if(this.list.length==0){
					this.kong = false
				}else{
					this.kong = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.commentlist{
		background-color: #FFF;
		width: 100%;
		margin: 24rpx auto 0 auto;
		border-radius: 20rpx;
		
		.commentinfo{
			display: flex;
			justify-content: space-between;
			width: 90%;
			margin: 0 auto;
			padding: 40rpx 30rpx;
			// background-color: #222;
			.personbox{
				display: flex;
				align-items: center;
				.logobox{
					margin-right: 16rpx;
					image{
						width: 70rpx;
						height: 70rpx;
						border-radius: 100%;
					}
				}
				.infobox{
					.namebox{
						width: 300rpx;
						font-size: 30rpx;
						font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
						font-weight: normal;
						color: #222222;
						-webkit-line-clamp: 1;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.starbox{
						display: flex;
						align-items: center;
						image{
							width: 24rpx;
							height: 24rpx;
							margin-right: 6rpx;
						}
					}
					.actstar{
						position: absolute;
						display: flex;
						align-items: center;
						margin-top: -41rpx;
						image{
							width: 25rpx;
							height: 25rpx;
							margin-right: 6rpx;
						}
					}
				}
			}
			.timebox{
				font-size: 24rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
				color: #555555;
			}
		}
		.wordbox{
			font-size: 28rpx;
			font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
			font-weight: normal;
			color: #333333;
			margin: 24rpx auto 30rpx auto;
			width: 90%;
			padding: 0rpx 30rpx;
		}
		.commentimg{
			display: flex;
			flex-wrap: wrap;
			width: 90%;
			margin: 0 auto;
			padding: 0rpx 30rpx;
			.imgbox{
				width: 33.3%;
				text-align: center;
				image{
					width: 210rpx;
					height: 210rpx;
					margin-bottom: 5rpx;
				}
			}
		}
	}

</style>
